<template>
  <div class="content">
    <LoginHeader />
    <Myinput
      :rule="/^\w{3,12}$/"
      errMsg="请输入正确名！不要乱搞啦"
      type="text"
      placeholder="用户名 / 手机号码"
      @setValue="setUsername"
    />
    <Myinput
      :rule="/^\d{3,12}$/"
      type="password"
      errMsg="哎呀！！你在搞撒子哟？？不记得密码就不要乱输撒~~"
      placeholder="密码"
      @setValue="setPassword"
    />
    <Mybtn btnText="登录" @click.native="login" />
  </div>
</template>

<script>
import LoginHeader from "../components/LoginHeader";
import Myinput from "../components/Myinput";
import Mybtn from "../components/Mybtn";
export default {
  components: {
    Myinput,
    LoginHeader,
    Mybtn,
  },
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    setUsername(newVal) {
      this.username = newVal;
    },
    setPassword(newVal) {
      this.password = newVal;
      console.log(this.password);
    },
    login() {
      this.$axios({
        method: "post",
        url: "/login",
        data: {
          username: this.username,
          password: this.password,
        },
      })
        //  // 把token和userid的值存到本地储存中：
        .then((res) => {
          console.log(res.data);
          const { data, message } = res.data;
          if (res.data.message == "登录成功") {
            this.$toast.success("登录成功");
            localStorage.setItem("token", data.token);
            localStorage.setItem("userId", data.user.id);
            // 跳转页面：
            this.$router.push("/profileindex");
          }
          // else {
          //   // 非403的情况：
          //   this.$toast.fail("登录失败。。。");
          // }
        });
      // .catch((err) => {
      //   // 这里捕捉的是：403的情况：
      //   this.$toast.fail("怎么登录失败了呀");
      // });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  padding: 20 / 360 * 100vw;
}
</style>
